<script setup>
import { ref, onBeforeMount, watch, reactive } from 'vue'
import CargoHead from "./CargoHead.vue"
import {
  User,
  Goods,
  Sell,
  Tickets
} from '@element-plus/icons-vue'
import { RouterView, useRouter } from "vue-router"

const router = useRouter()

const active = ref("")

const crumbs = ref([])

onBeforeMount(() => {
  active.value = router.currentRoute.value.path
  initCrumbs(router.currentRoute.value.matched)
})

const handleRouter = (val) => {
  active.value = val
  initCrumbs(router.currentRoute.value.matched)
}

const initCrumbs = (matched) => {
  crumbs.value = []
  console.log(matched)
  matched.map(m => {
    if (m.meta.isCrumb) {
      crumbs.value.push(m.meta)
    }
  })
}

const gotoLogout = () => {
  router.push({ name: 'login' })
}
</script>

<template>
  <el-container class="container">
    <el-aside width="200px" class="aside">
      <el-menu style="height: 100%;" :default-active="active" router @select="handleRouter" text-color="#fff"
        active-text-color="#409eff" background-color="#303133">
        <div class="logo"
          style="color: #fff;height: 60px;background-color: #409eff;text-align: center;line-height: 60px;">渝乡情后台系统</div>
        <el-menu-item index="/cargoList">
          <el-icon>
            <goods />
          </el-icon>
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/businessList">
          <el-icon>
            <User />
          </el-icon>
          <span>商家列表</span>
        </el-menu-item>
        <el-menu-item index="/orderList">
          <el-icon>
            <Tickets />
          </el-icon>
          <span>订单列表</span>
        </el-menu-item>
        <el-menu-item index="/tradeList">
          <el-icon>
            <Sell />
          </el-icon>
          <span>交易统计</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="display: flex;align-items: center;justify-content: space-between;">
        <!-- <el-breadcrumb separator="/">
          <template v-for="(c, index) in crumbs" :key="c.path">
            <el-breadcrumb-item v-if="index < crumbs.length && crumbs.length > 1" :to="{ path: c.path }">
              {{ c.crumb }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-else>{{ c.crumb }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb> -->
        <div></div>
        <div style="height: 100%;display: flex;align-items: center;justify-content: space-around;">
          <el-button link type="primary" @click="gotoLogout">退出</el-button>
        </div>
      </el-header>
      <el-main class="main">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.main {
  background-color: #F5F7FA;
}
</style>
